<template>
  <div class="content-box">
    <e-heading>{{title}}</e-heading>
    <div class="curriculum_show">
      <el-row class="title">
        <el-col :span="24">
          课程名称：
          {{currilumName}}
          <i class="state" v-if="$route.query.state == 5">[{{['草稿','审核中','审核不通过','审核通过','仓库中','进行中'][$route.query.state]}}]</i>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3" class="text_center">校 区：</el-col>
        <el-col :span="21">
          <p v-if="campusList.length == 0" class="no_select">请在校区列表添加校区</p>
          <div v-else-if="$route.query.classtype == 2">
            <span style="margin-right:10px;" v-for="(item, index) in campusList" :key="index">{{item.schoolName}}</span>
          </div>
          <div v-else>
            <el-radio-group  v-model="radioCampus" class="checker-plain" @change="handleSelectCampus"> 
              <el-radio v-for="(item, index) in campusList" :key="index" :label="item.schoolId" >{{item.schoolName}}</el-radio>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3" class="text_center">班 别：</el-col>
        <el-col :span="21">
          <div v-if="$route.query.classtype == 2">
            <el-radio-group v-model="radioClass" class="checker-plain" @change="handleSelectClass2">
              <el-radio v-for="(item, index) in classList" :key="index" :label="item.classLevelId">{{item.classLevelName}}</el-radio>
            </el-radio-group>
          </div>
          <div v-else>
            <p v-if="!radioCampus" class="no_select">请选择校区</p>
            <p v-if="classList.length == 0 && radioCampus" class="no_select">暂无班别</p>
            <el-radio-group v-model="radioClass" class="checker-plain" v-else @change="handleSelectClass">
              <el-radio v-for="(item, index) in classList" :key="index" :label="item.classLevelId">{{item.classLevelName}}</el-radio>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
      <el-row v-if="$route.query.classtype == 2">
        <el-col :span="3" class="text_center">次课类型：</el-col>
        <el-col :span="21">
          <span v-for="(item, index) in timeCourseList" :key="index" style="margin-right:10px;">
            {{item.timesCourseText}}
          </span>
        </el-col>
      </el-row>
      <el-row v-if="$route.query.classtype == 0 || $route.query.classtype == 1">
        <el-col :span="3" class="text_center">上课时间：</el-col>
        <el-col :span="21">
          <p v-if="!radioClass" class="no_select">请选择班别</p>
          <p v-if="timeList.length == 0 && radioClass" class="no_select">暂无上课时间</p>
          <el-radio-group v-model="radioTime" class="checker-plain" v-else @change="handleSelectTime">
            <el-radio v-for="(item,index) in timeList" :key="index" :label="item" v-if="item">{{item}}</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
      <el-row v-if="$route.query.classtype == 0 || $route.query.classtype == 1">
        <el-col :span="3" class="text_center"></el-col>
        <el-col :span="21">
          <div class="class_list">
            <p v-if="gradeList.length == 0" class="no_select">暂无班级</p>
            <el-radio-group v-model="radioGrade" v-else @change="handleSelectGrade">
              <el-radio v-for="(item, index) in gradeList" :key="index" :label="item.classId" v-if="item.beginTime && item.endTime" :title="getParentYear(item.beginTime) +' - '+ getParentYear(item.endTime) +'('+ item.className +')'">{{item.beginTime | FormatDate('yyyy-MM-dd')}} - {{item.endTime | FormatDate('yyyy-MM-dd')}}({{item.className}})</el-radio>
            </el-radio-group>
          </div>
        </el-col>
      </el-row>
      <transition name="fade">
        <div class="grade_show" v-if="radioGrade || $route.query.classtype == 2">
          <el-row>
            <el-col :span="3">班 级：</el-col>
            <el-col :span="21" v-if="$route.query.classtype == 2">{{gradeShow.className}}</el-col>
            <el-col :span="21" v-else>{{gradeShow.beginTime | FormatDate('yyyy-MM-dd')}} - {{gradeShow.endTime | FormatDate('yyyy-MM-dd')}}({{gradeShow.className}})</el-col>
          </el-row>
          <el-row v-if="$route.query.classtype == 0 || $route.query.classtype == 1">
            <el-col :span="3">课 时：</el-col>
            <el-col :span="21">{{gradeShow.lessonCount}}</el-col>
          </el-row>
          <!--专业课-->
          <el-row v-if="$route.query.classtype == 0">
            <el-col :span="3">教 练：</el-col>
            <el-col :span="3">{{gradeShow.teacherName ? gradeShow.teacherName : '-'}}</el-col>
            <el-col :span="3">助理教练：</el-col>
            <el-col :span="6">{{gradeShow.assistant && gradeShow.assistant.length > 0 ? gradeShow.assistant.join('；') : '-'}}</el-col>
            <el-col :span="3">课程顾问：</el-col>
            <el-col :span="6">{{gradeShow.advisor && gradeShow.advisor.length > 0 ? gradeShow.advisor.join('；') : '-'}}</el-col>
          </el-row>
          <!--次课-->
          <div v-if="$route.query.classtype == 2">
            <div v-for="(item, index) in gradeShow.courseCycleList" :key="index">
              <el-row>
                <el-col :span="24">
                  每{{item.weekCode | getWeekDay}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{getParenTime(item.beginTime) + '-'+ getParenTime(item.endTime)}}
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="3">教 练：</el-col>
                <el-col :span="3">{{item.teacherName ? item.teacherName : '-'}}</el-col>
                <el-col :span="3">助理教练：</el-col>
                <el-col :span="6">{{item.assistant && item.assistant.length > 0 ? item.assistant.join('；') : '-'}}</el-col>
                <el-col :span="3">课程顾问：</el-col>
                <el-col :span="6">{{item.advisor && item.advisor.length > 0 ? item.advisor.join('；') : '-'}}</el-col>
              </el-row>
            </div>
          </div>
          <el-row>
            <el-col :span="24">{{$route.query.classtype == 2 ? '累计上课人数：' : '班级人数：'}}{{gradeShow.studentCount || gradeShow.startCourseCount || 0}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="3">开课状态：</el-col>
            <el-col :span="21">
              <span v-if="gradeShow.startStatus == 0">未开课</span>
              <span v-if="gradeShow.startStatus == 1">已开课</span>
              <span v-if="gradeShow.startStatus == 2">已结束</span>
            </el-col>
          </el-row>
          <!--专业课-->
          <el-row v-if="$route.query.classtype == 0">
            <el-col :span="3">上课周期：</el-col>
            <el-col :span="21">
              <el-row v-for="(item, index) in gradeShow.courseCycleList" :key="index" style="line-height:1.7">
                <el-col :span="4">{{item.weekCode | getWeekDay}}</el-col>
                <el-col :span="6">{{getParenTime(item.beginTime)}}-{{getParenTime(item.endTime)}}</el-col>
                <el-col :span="12">{{item.address}}</el-col>
              </el-row>
            </el-col>
          </el-row>
          <!--综合课-->
          <el-row v-if="$route.query.classtype == 1">
            <el-col :span="3">上课周期：</el-col>
            <el-col :span="21">
              <el-row  v-for="(item, index) in gradeShow.courseCycleList" :key="index" style="line-height:1.7">
                <el-col :span="2">{{item.weekCode | getWeekDay}}</el-col>
                <el-col :span="5">{{item.subjectName}}</el-col>
                <el-col :span="4">{{getParenTime(item.beginTime)}}-{{getParenTime(item.endTime)}}</el-col>
                <el-col :span="4">{{item.address}}</el-col>
                <el-col :span="9">
                  <p>教 练：{{item.teacherName ? item.teacherName : '-'}}</p>
                  <p>助理教练：{{item.assistant && item.assistant.length > 0 ? item.assistant.join('；') : '-'}}</p>
                  <p>课程顾问：{{item.advisor && item.advisor.length > 0 ? item.advisor.join('；') : '-'}}</p>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" v-if="Number($route.query.state)>2">
              <router-link :to="{
                path: $route.query.classtype == 2 ? '/training/class/detailTime':'/training/class/detail', 
                query: {id: gradeShow.classId, crruid: crruid}}" tag="a" class="link">
                查看该班详情
              </router-link>
            </el-col>
          </el-row>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
import trainApi from 'api/train'
import { parseTime } from 'utils'
export default {
  created () {
    trainApi.trainCourseDetail({ // 查询课程详情&校区
      courseId: this.$route.query.id,
      classLevelId: this.$route.query.classtype
    }).then((res) => {
      this.crruid = res.data.courseId
      this.currilumName = res.data.courseName
      this.campusList = res.data.saleCorreList
      if (this.$route.query.classtype == '2') { // eslint-disable-line
        trainApi.listTrainClassLevelInfo({
          courseId: this.$route.query.id
        }).then((res) => {
          this.classList = res.data.saleCorrelationVO
          this.radioClass = this.classList[0] ? this.classList[0].classLevelId : ''
        })
      }
    }).catch(() => {
      return false
    })
  },
  mounted () {
    this.handleSelectTime()
  },
  data () {
    return {
      title: '课程详情',
      crruid: '',
      currilumName: '',
      radioCampus: '',
      campusList: [],
      timeCourseList: [],
      radioClass: '',
      selectedClass: '',
      classList: [],
      radioTime: '',
      timeList: [],
      radioGrade: '',
      gradeList: [],
      gradeShow: {}
    }
  },
  methods: {
    loadTimeCourse (classLevelId) {
      trainApi.queryTimeCourse({
        courseId: this.$route.query.id,
        classLevelId: classLevelId
      }).then((res) => {
        this.timeCourseList = res.data
      })
    },
    handleSelectCampus () { // 选择校区，查询班别
      this.radioClass = ''
      this.radioTime = ''
      this.radioGrade = ''
      this.handleSelectTime()
      trainApi.listTrainClassLevelInfo({
        courseId: this.$route.query.id,
        schoolId: this.radioCampus
      }).then((res) => {
        this.classList = res.data.saleCorrelationVO
      }).catch(() => {
        return false
      })
    },
    getParentYear (time) {
      return parseTime(time, '{y}-{m}-{d}')
    },
    getParenTime (time) {
      return parseTime(time, '{h}:{i}')
    },
    handleSelectClass () { // 选择班别，查询上课时间段
      this.radioTime = ''
      this.radioGrade = ''
      this.gradeList = []
      this.handleSelectTime()
      trainApi.listStartClassTimeInfo({
        courseId: this.$route.query.id,
        schoolId: this.radioCampus,
        classLevelId: this.radioClass
      }).then((res) => {
        this.timeList = res.data
      }).catch(() => {
        return false
      })
    },
    handleSelectClass2 () {
      this.loadTimeCourse(this.radioClass)
      trainApi.timeCourseInfo({
        courseId: this.$route.query.id,
        classLevelId: this.radioClass
      }).then((res) => {
        this.gradeShow = res.data
      }).catch(() => {
        return false
      })
    },
    handleSelectTime () { // 选择上课时间，查询班级列表
      this.radioGrade = ''
      trainApi.listTrainClassInfo({
        courseId: this.$route.query.id,
        schoolId: this.radioCampus,
        classLevelId: this.radioClass,
        courseTimeRegion: this.radioTime
      }).then((res) => {
        this.gradeList = res.data
      }).catch(() => {
        return false
      })
    },
    handleSelectGrade () { // 选择班级，查询班级详情
      if (this.radioGrade) {
        trainApi.trainClassInfo({
          classId: this.radioGrade,
          properties: this.$route.query.classtype
        }).then((res) => {
          this.gradeShow = res.data
        }).catch(() => {
          return false
        })
      }
    }
  }
}
</script>
<style lang="scss">
.curriculum_show{
  border-top:1px solid #efefef;
  padding-top: 20px;
  .el-row {
    line-height: 2.7
  }
  .el-col{
    margin: 3px 0;
  }
  .text_center{
    line-height:36px;
    text-align:center;
  }
  .title{
    font-size: 16px;
    margin-bottom:15px;
  }
  .no_select{
    color:#999;
    line-height:36px;
  }
  .state{
    color:#d95814;
    font-style: normal;
  }
  .checker-plain.el-radio-group{
    margin:0;
  }
  .class_list{
    border:1px solid #efefef;
    padding: 15px 25px;
    .el-radio-group .el-radio{
      width:322px;
      overflow: hidden;
      text-overflow:ellipsis;
      margin:10px 0;
      color:#999;
    }
  }
  .grade_show{
    margin-top:45px;
    background: #f5f5f5;
    padding: 35px 35px 17px 35px;
    >.el-row{
      margin:0 0 18px 0;
      line-height:1.7;
    }
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
    opacity: 0
  }
}
</style>
